<template>
    <div>
    <el-form inline class="demo-form-inline">
    <el-row >
    <el-col :span="6">
        <el-form-item label="任务名称">
            <el-input v-model="query.payload.jobName" placeholder="任务名称" />
        </el-form-item>
    </el-col>
    <el-col :span="6">
        <el-form-item label="任务编码">
            <el-input v-model="query.payload.jobCode" placeholder="任务编码" />
        </el-form-item>
    </el-col>
    <el-col :span="6">
        <el-form-item label="执行状态">
            <el-select v-model="query.payload.status" placeholder="请选择">
                <el-option  label="正在执行" :value = 0 />
                <el-option  label="执行完成" :value = 1 />
                <el-option  label="异常" :value = 2 />
            </el-select>
        </el-form-item>
    </el-col>
    </el-row>
    <el-row >
        <el-form-item label="时间范围">
            <el-date-picker
                    v-model="query.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain activity @click="queryJobExecHis">查询</el-button>
            <el-button type="primary" plain activity @click="reset">重置</el-button>
            <el-button type="primary" plain @click="addJobExecHis">新增</el-button>
        </el-form-item>
    </el-row>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号" width="100px" />
        <el-table-column align="center" prop="jobName" label="任务名称" />
        <el-table-column align="center" prop="jobCode" label="任务编码" />
        <el-table-column align="center" prop="auto" label="自动" >
            <template v-cloak #default="scope">
                {{scope.row.auto == '1' ? '是':"否"}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="执行状态" >
            <template v-cloak #default="scope">
                {{scope.row.status == 0 ? '正在执行': scope.row.status == 1 ? "执行完成" : "异常"}}
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="updateTime" label="更新时间" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
</el-table>
<el-pagination
        style="display: flex;align-items:center;justify-content:center;"
        v-model:currentPage="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
        @size-change="queryJobExecHis"
        @current-change="queryJobExecHis"
/>
</div>
</template>

<script setup>
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'

    let data = reactive({
        modRole:false,
        roleToMenu:false,
        tableData:[],
        type:"",
        id:"",
    });
    let loading = ref(true)
    let query = reactive({dateRange:[],payload:{}, currentPage:1,pageSize:10,total:0})
    onMounted(() => {
        queryJobExecHis()
    })
    function queryJobExecHis(){
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        request.post("/api/jobExecHis/getJobExecHisPage", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset(){
            query.payload.jobName = ""
            query.payload.jobCode = ""
            query.payload.status = ""
    }

    function addJobExecHis(){
        data.modJobExecHis = true
        data.type = "add"
    }

    function deleteJobExecHis(id){
        request.get(`/api/jobExecHis/delete/${id}`).then(resp => {
            queryJobExecHis()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }

    function editJobExecHis(id){
        data.id = id
        data.type = "edit"
        data.modJobExecHis = true
    }

</script>
<style lang="css">

</style>


